/**
 * create by young (young2f@outlook.com) on 2021/2/6
 */
'use strict';
import React, {Component} from 'react'
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
require('echarts/lib/chart/line')

export default class TLine extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentDidMount() {
    setTimeout(() => {
      this.initEchart(this.props.data)
    }, 200)
  }

  componentWillReceiveProps(newProps) {
    this.initEchart(newProps.data)
  }

  initEchart = (data) => {
    let myEcharts = echarts.init(this.echartsBox)

    let option = {
      title: {
        text: this.props.title || '',
        left: 'center',
        top: '0'
      },
      smooth: true,
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            show: false
          }
        },
        // formatter: '{b}<br/>合同金额：{c}',
        formatter: function (e) {
          const data = e[0]
          return `${data.seriesName} ${data.value} <br/> ${data.axisValueLabel}`
        },
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
      },
      xAxis: {
        data: data.x,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        name: this.props.yName,
        nameGap: 15,
        position: 'left',
        axisTick: {
          inside: true
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: [{
        name: this.props.pointTitle,
        type: 'line',
        data: data.y,
        smooth: false,
        lineStyle: {
          color: '#00CC99',
          width: 2
        },
        itemStyle: {
          color: '#fff',
          borderColor: '#000'
        }
      }]
    }
    myEcharts.setOption(option)
    myEcharts.on('finished', () => {
      myEcharts.resize()
    })
  }

  render() {
    const {width = '100%', height = '100%', style = {}} = this.props;
    return (
      <div ref={(c) => {
        this.echartsBox = c
      }} style={{width, height, ...style}}>
      </div>
    )
  }
}



